<template>
  <el-container class="home-container">
    <!--头部-->
    <el-header>
      <el-page-header @back="goBack" content="章节目录"></el-page-header>
    </el-header>
    <el-container>
      <el-aside>
        <div style="margin-top: 100px">
          <el-card :body-style="{padding: '0px'}">
            <el-image style="width: 100%; height: 100%" :src="this.img" :fit="fit"></el-image>
          </el-card>
        </div>
      </el-aside>
      <el-main>
        <el-card>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item
              v-for="(chap, index) in chapter"
              :key="index"
              :title="chap.chaptername"
            >
              <el-row :gutter="24">
                <el-col :span="20" :offset="2">
                  <el-table :data="smallchap" border style="width: 100%;" size="small">
                    <template slot="empty">还没有数据呢~ (⊙︿⊙)</template>
                    <el-table-column prop="chaptername" label="小节名称" align="center"></el-table-column>
                    <el-table-column align="center" label="教学视频">
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="govideo(scope.row.chapterid,scope.row.url)">观看视频</el-button>
                     
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-card>
         <video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions">
        </video-player>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getStore } from "../../libs/storage";
export default {
  data() {
    return {
         playerOptions: {
                    //播放速度
                    playbackRates: [0.5, 1.0, 1.5, 2.0], 
                    //如果true,浏览器准备好时开始回放。
                    autoplay: false, 
                    // 默认情况下将会消除任何音频。
                    muted: false, 
                    // 导致视频一结束就重新开始。
                    loop: false, 
                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    preload: 'auto', 
                    language: 'zh-CN',
                     // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: '16:9',
                     // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    fluid: false,
                    sources: [{
                        //类型
                        type: "video/mp4",
                        //url地址
                        src: '' 
                    }],
                    //你的封面地址
                    poster: '', 
                     //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        //全屏按钮
                        fullscreenToggle: true  
                    }
                },
            chaplist: [],
      chapter: [
        {
          chaptername: "第一章"
        }
      ],
      activeName: "1",
      smallchap: [
        {
          chaptername: ""
        }
      ],
      img:''
    };
  },
  created() {
    this.listByCategory();
  },
  methods: {
    listByCategory() {
      this.img = getStore("img1");
      this.$axios
        .post("/getchapter", {
          courseid: this.$route.params.courseid
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.smallchap = resp.data;
            return;
          }
        })
        .catch(failResponse => {
          console.log(getStore("userid"));
          console.log(failResponse.responseResult);
        });
    },
    goBack() {
      this.$router.push("/coursemenu");
    },
    async govideo(id,url){
    //       let res = await this.$http.get("getchaplist", {
    //     params: {
    //       couid: window.sessionStorage.getItem("couid")
    //     }
    //   });
        //chapterid:id
       // this.playerOptions.sources[0].src
       let res =  this.$axios
        .post("/getvideo", {
         // courseid: this.$route.params.courseid
         chapterid:id
        })
        console.log(this.playerOptions.sources[0].src);
       // console.log(this.scscope.row.url);
        // this.chaplist = res.data;
         console.log(this.chaplist);
        this.playerOptions.sources[0].src = url;
         console.log(this.playerOptions.sources[0].src);
        //console.log(res.data);
        // .then(resp => {
        //   if (resp && resp.status === 200) {
        //     this.smallchap = resp.data;
        //     return;
        //   }
        // })
        // .catch(failResponse => {
        //   console.log(getStore("userid"));
        //   console.log(failResponse.responseResult);
        // });
    }
  }
};
</script>

<style scoped>
 .demo{
    display: inline-block;
    width: 800px;
    height: auto;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }
 
  .demo:hover{
    display: block;
  }
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.image {
  width: 100%;
}
</style>